<script setup>
import { ElButton } from 'element-plus';
import { useRouter } from 'vue-router';
import { userStore } from '@/store/index.js';
import axios from "axios";
import { onMounted } from "vue";

const userItemStore = userStore();
const router = useRouter();

const goLogin = () => {
  router.push("/login").catch(err => err);
};

const gotoHome = () => {
  router.push("/").catch(err => err);
};

const goMyOrder = () => {
  router.push("/myOrder").catch(err => err);
};

const goWish = () => { router.push("/favorites").catch(err => err); };
const goMyCenter = () => {
  router.push("/myCenter").catch(err => err);
};
const goStore = () => { router.push("/storeApp").catch(err => err); };
const goGoodsCart = () => { router.push("/goodsCart").catch(err => err); };

const goReviews = () => { router.push("/reviews").catch(err => err); };

//退出
const goLogout = () => {
  axios.delete('/users/logout').then(resp => {
    //删除本地存储
    localStorage.removeItem('token');
    localStorage.removeItem('user');

    //提示信息
    userItemStore.updateUser(null);
    userItemStore.updateLoginStatus(false);
    window.location.reload();
    //跳转到主页
    gotoHome();
  })
}

//判断用户是否已经登录
const isLogged = () => {
  axios.get("/carType/isLogged").then(resp => {
    const user = resp.data;
    //更新Vuex中用户信息
    userItemStore.updateUser(user);
    userItemStore.updateLoginStatus(true)
  }).catch(error => {
    console.log(`用户未登录 ${error}`);
  });
}
const goRegister = () => {
  router.push("/register").catch(err => err);
}

onMounted(() => {
  isLogged();
})
</script>

<template>
  <div class="banner">
    <el-col :span="6">
      <el-button type="text" @click="gotoHome" class="homeButton">首页</el-button>
    </el-col>
    <el-col :span="12" class="button-group">
      <template v-if="userItemStore.loggedIn">
        <el-button type="text" class="home-button" @click="goWish" >我的心愿订单</el-button>
        <el-button type="text" size="default" class="home-button" @click="goMyOrder">我的订单</el-button>
        <el-button type="text" size="default" class="home-button" @click="goStore">商城</el-button>
        <el-button type="text" size="default" class="home-button" @click="goGoodsCart">购物车</el-button>
        <el-button type="text" size="default" class="home-button" @click="goReviews">评价</el-button>
        <el-button type="text" size="default" class="home-button" @click="goMyCenter">个人中心</el-button>
      </template>
    </el-col>
    <el-col :span="6" class="right-side">
      <template v-if="userItemStore.loggedIn">
        <span class="welcome-message">欢迎您：{{ userItemStore.user.username }}</span>
        <el-button type="text" size="default" @click="goLogout" class="logout-button">退出</el-button>
      </template>
      <template v-else>
        <el-button type="text" size="default" class="login-button" @click="goLogin" >登录</el-button>
        <el-button type="text" size="default" class="login-button" @click="goRegister">注册</el-button>
      </template>
    </el-col>
  </div>
  <div class="divider"></div>
</template>

<style scoped>
.banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  background: rgb(255, 255, 255);
}

.homeButton {
  color: #070505;
  margin-left: 300px;
  transition: font-size 0.2s;
}
.homeButton:hover {
  font-size: 20px;
}

.home-button {
  color: #070505;
  margin-left: 30px;
  transition: font-size 0.2s;
}
.home-button:hover {
  font-size: 20px;
}

.button-group {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.right-side {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.welcome-message {
  font-size: 16px;
  margin-right: 15px;
}

.logout-button {
  margin-left: 15px;
  color: red;
}

.login-button {
  color: #070505;
  margin-right: 30px;
  transition: font-size 0.2s;
}

.login-button:hover {
  font-size: 20px;
}

.divider {
  height: 2px;
  background-color: #1e1616;
  width: 100%;
}
</style>
